<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ chart.page_title }}</title>
</head>
<body>
<style>
    .fl-table {
        margin: 20px;
        border-radius: 5px;
        font-size: 12px;
        border: none;
        border-collapse: collapse;
        max-width: 100%;
        white-space: nowrap;
        word-break: keep-all;
    }

    .fl-table th {
        text-align: left;
        font-size: 20px;
    }

    .fl-table tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }

    .fl-table tr:hover td {
        background: #00d1b2;
        color: #F8F8F8;
    }

    .fl-table td, .fl-table th {
        border-style: none;
        border-top: 1px solid #dbdbdb;
        border-left: 1px solid #dbdbdb;
        border-bottom: 3px solid #dbdbdb;
        border-right: 1px solid #dbdbdb;
        padding: .5em .55em;
        font-size: 15px;
    }

    .fl-table td {
        border-style: none;
        font-size: 15px;
        vertical-align: center;
        border-bottom: 1px solid #dbdbdb;
        border-left: 1px solid #dbdbdb;
        border-right: 1px solid #dbdbdb;
        height: 30px;
    }

    .fl-table tr:nth-child(even) {
        background: #F8F8F8;
    }
</style>

<p class="title" {{ chart.title_opts.title_style }}> {{ chart.title_opts.title }}</p>
<p class="subtitle" {{ chart.title_opts.subtitle_style }}> {{ chart.title_opts.subtitle }}</p>
{% for c in chart %}
    {{ c }}
{% endfor %}

</body>
</html>
